<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生兴OA办公管理系统</title>
 <div th:include="commons/easyui::easyui"></div>
 <style>
 #tabs .tabs-panels>.panel>.panel-body {
	overflow: hidden;
}

.panel-body{
overflow: hidden;
}
  .top{
    background:#438eb9;
   
    
  }

  .top-header{
  
   padding:2px 5px 2px 20px;
   font-size: 20px;
  
  }
  
  
  #nav-accordion  ul {
	padding: 0px;
	margin: 0px;
}

#nav-accordion ul li {
	background-color: #B4CDCD;
	list-style: none;
	padding: 5px 0px;
	margin: 1px;
	text-align: center;
}

#nav-accordion ul li a {
	text-decoration: none;
	line-height: 15px;
	color: #fff;
}

#nav-accordion ul li a.active {
	background-color: "#66ccff";
	color: red;
}



 </style>
 
 <script type="text/javascript">
	function showTime() { 
		var today = new Date();
		//分别取出年、月、日、时、分、秒
		var year = today.getFullYear();
		var month = today.getMonth() + 1;
		var day = today.getDate();
		var hours = today.getHours();
		var minutes = today.getMinutes();
		var seconds = today.getSeconds();

		//如果是单个数，则前面补0
		month = month < 10 ? "0" + month : month;
		day = day < 10 ? "0" + day : day;
		hours = hours < 10 ? "0" + hours : hours;
		minutes = minutes < 10 ? "0" + minutes : minutes;
		seconds = seconds < 10 ? "0" + seconds : seconds;

		//构建要输出的字符串
		var str = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes
				+ ":" + seconds;
		//获取id=result的对象
		var obj = document.getElementById("timer");
		//将str的内容写入到id=result的<div>中去
		obj.innerHTML = str;
		//延时器
		window.setTimeout("showTime()", 1000);

	}

	function addTab(title, url) {
		if ($('#tabs').tabs('exists', title)) {
			$('#tabs').tabs('select', title);
		} else {
			var content = '<iframe title="' + title
					+ '" frameborder="0"  src="' + url
					+ '" style="width:100%;height:100%;"></iframe>';
			$('#tabs').tabs('add', {
				title : title,
				content : content,
				closable : true
			});
		}

	}
	
	$(function(){
		
		$('#tabs').tabs({
			onSelect : function(title, index) {
				$("#nav-accordion ul li").css({
					"background" : "#B4CDCD"
				});
				$('#nav-accordion ul li[title=' + title + ']').css({
					"background" : "#AEEEEE"
				});

				var pid = $('#nav-accordion ul li[title=' + title + ']').attr("pid");
				var selectAccordon = $("#menu" + pid).attr("alt");
				$('#nav-accordion').accordion('select', selectAccordon);
			}

		});
		
		
		initMenu();
		
		
		
		
		
		
		$("#nav-accordion ul li").click(function() {
			$("#nav-accordion ul li").css({
				"background" : "#B4CDCD"
			})
			$(this).css({
				"background" : "#AEEEEE"
			})

		});
	 
		
		
		
		
		
	});
	
	function initMenu(){
		
		$.ajax({
			type : 'get',
			url : '/sys/menu/menusByUserId',
			
			contentType : 'application/json;charset=UTF-8',
			success : function(data) {
				console.log(data.rows);
				createMenus(data.rows);
				
				
			}
		});
		
		$("#nav-accordion").accordion({
	         fit:true
        });
		
	}
   
	
	function createMenus(rows){
		/* 完成一级目录 */
		rows.forEach(function(item,index){
			console.log(item);
			if(item.parentId!=null&& item.type==0){
				$("#nav-accordion").append('<div title="'+item.name+'"><ul></ul></div>')
			}
			
			
		});
		
		
		
	}
 
 
 </script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north'" style="overflow:hidden;" >
	 <div class="top">
	    <div class="top-header">
	    	<p >企业OA 办公自动化管理系统</p>
	    </div>   
	 </div>
	</div>   
    <div data-options="region:'south'"  >
       <div th:include="easyui/footer::footer"> </div>
	
	</div>
       
    <div data-options="region:'west',title:'导航'" style="width:210px;">
	   <div id="nav-accordion" class="easyui-accordion" data-options="fit:true">   
		   <!--  <div title="个人中心" data-options="iconCls:'icon-man'" style="overflow:auto;">   
		        <ul>
		        <li title="用户管理"><a href="javascript:addTab('用户管理', '/sys/user/tousers')">用户管理</a></li>
		        <li title="部门管理"><a href="javascript:addTab('部门管理', '/sys/dept/todepts')">部门管理</a></li>
		        <li title="角色管理"><a href="javascript:addTab('角色管理', '/sys/role/toroles')">角色管理</a></li>
		        <li title="资源管理"><a href="javascript:addTab('资源管理', '/sys/menu/tomenus')">资源管理</a></li>
		        <li title="权限管理"><a href="javascript:addTab('权限管理', 'sys/grant/togrant')">权限管理</a></li>
		       
	          </ul>
		    </div>   
		    <div title="办公中心" data-options="iconCls:'icon-man'" style="overflow:auto;">   
		         <ul>
		        <li title="资料管理"><a href="javascript:addTab('用户管理', '/sys/user/tousers')">用户管理</a></li>
		        <li title="部门管理"><a href="javascript:addTab('部门管理', '/sys/dept/todepts')">部门管理</a></li>
		        <li title="角色管理"><a href="javascript:addTab('角色管理', '/sys/role/toroles')">角色管理</a></li>
		        <li title="资源管理"><a href="javascript:addTab('资源管理', '/sys/menu/tomenus')">资源管理</a></li>
		        <li title="权限管理"><a href="javascript:addTab('权限管理', 'sys/grant/togrant')">权限管理</a></li>
		       
	          </ul> 
		    </div>   
		    <div title="系统管理" data-options="iconCls:'icon-man',selected:true"> 
		      <ul>
		        <li title="用户管理"><a href="javascript:addTab('用户管理', '/sys/user/tousers')">用户管理</a></li>
		        <li title="部门管理"><a href="javascript:addTab('部门管理', '/sys/dept/todepts')">部门管理</a></li>
		        <li title="角色管理"><a href="javascript:addTab('角色管理', '/sys/role/toroles')">角色管理</a></li>
		        <li title="资源管理"><a href="javascript:addTab('资源管理', '/sys/menu/tomenus')">资源管理</a></li>
		        <li title="权限管理"><a href="javascript:addTab('权限管理', 'sys/grant/togrant')">权限管理</a></li>
		       
	          </ul>
		    </div>    -->
	    </div>
	    
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;overflow:hidden;"  >
    
    <div id="tabs" class="easyui-tabs" data-options="fit:true" style="overflow:hidden;" >
			<div title="首页" style="padding: 20px; display: none;">
				欢迎进入企业OA自动化管理系统</div>
		</div>
    </div>   
    
    <div id="dialog"></div>
</body>
</html>